<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="变更单信息"
    width="900"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <vxe-grid ref="tableRef" v-bind="tableOptions">
      <template #LatestAuditor="{ row }">
        <div>{{ row.task_list[row.task_list.length - 1].user_id }}</div>
        <div>{{ row.task_list[row.task_list.length - 1].node_name }}</div>
      </template>
      <template #changeContent="{ row }">
        <div v-for="(item, index) in row.change_order_detail" :key="index">
          <div class="font-bold">{{ item.goods_sku?.sku }}</div>
          <div v-html="item.content"></div>
        </div>
      </template>
      <template #createUser="{ row }">
        <div>{{ row.user_id }}</div>
        <div>{{ formatDate(Number(row.start_time)) }}</div>
      </template>
    </vxe-grid>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="LogisticsAudit" lang="jsx">
import { ElMessage } from "element-plus";
import { getFlowDetail } from "../api";
import { formatDate } from "@/utils/index.js";
const visible = ref(false);
const loading = ref(false);
const emit = defineEmits(["refresh"]);
const load = ref(false);
const open = async (sku_id) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  getDetail(sku_id);
  visible.value = true;
};

const tableOptions = reactive({
  round: true,
  height: "600",
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [],
  columns: [
    { title: "序号", type: "seq", width: "60" },
    { title: "变更类型", field: "change_type_text", width: "120" },
    { title: "状态", field: "status_text", width: "120" },
    {
      title: "最新审核人",
      field: "user_id",
      width: "140",
      slots: {
        default: "LatestAuditor",
      },
    },
    {
      title: "变更内容",
      field: "customs_code",
      minWidth: "220",
      slots: {
        default: "changeContent",
      },
    },
    {
      title: "发起人",
      field: "user_id",
      width: "150",
      slots: {
        default: "createUser",
      },
    },
  ],
});

const getDetail = async (sku_id) => {
  tableOptions.loading = true;
  try {
    const res = await getFlowDetail({ sku_id });
    tableOptions.data = res?.data || [];
    tableOptions.loading = false;
  } catch (e) {
    tableOptions.loading = false;
    throw Error(e);
  }
};

const close = (refresh) => {
  if (refresh) emit("refresh");
  visible.value = false;
};
defineExpose({ open });
</script>
